<template>
	<view>
		<image class="col-100" src="../../static/image/img_banner.png"/>
		<view class="cc-rows cc-flex-vcenter" style="margin-right: 30rpx;" @click="showselect = true">
			<fui-input disabled="" :padding="['30rpx','32rpx']" borderColor="#fff" v-model="form.app_name"
				label="所属应用" :bottomLeft="0" placeholder="请选择所属应用">
			</fui-input>
			<fui-picker linkage :options="dropdown" :show="showselect" confirmColor="#4cccc5" color="#4cccc5"
				@change="chooseApp" radius />
			<fui-icon name="arrowright" :size="40"/>
		</view>
		<view class="cc-rows cc-flex-vcenter" style="margin-right: 30rpx;">
			<fui-input v-model="form.device_id" :padding="['30rpx','32rpx']" borderColor="#fff"
				label="设备编码" :bottomLeft="0" placeholder="请输入编码">
			</fui-input>
		</view>
		<view class="cc-rows cc-flex-vcenter" style="margin-right: 30rpx;">
			<fui-input :padding="['30rpx','32rpx']" borderColor="#fff" v-model="form.device_sn"
				label="自定义编码" :bottomLeft="0" placeholder="根据需要选填">
			</fui-input>
		</view>
		<view class="col-90" style="position: fixed;bottom: 50rpx;">
			<fui-button @click="submit" background="linear-gradient(to bottom right, #4cccc5 100%, #02DBC0 100%)" :margin="['0','40rpx']" 
			border-width="0" text="保存" radius="50rpx"/>
		</view>
	</view>
</template>

<script>
	import { ref } from 'vue'
	import { useInfoStore } from '@/stores/info'
	export default {
		setup(){
			const storeInfo = useInfoStore()
			const form=ref({
				id:0,
				app_id:'',
				app_name:'',
				device_id:'',
				device_sn:'',
			})
			const showselect=ref(false)
			const dropdown=ref([])
			return {
				storeInfo,form,showselect,dropdown
			}
		},
		
		onLoad({id}) {
			console.log(666, id)
			if(id){
				uni.publicJs.post('/app/index?cmd=loadDeviceInfo',{id},
					res=>{
						console.log(res)
						this.form={
							id:res.data.id,
							app_id:res.data.app_id,
							app_name:res.data.app_name,
							device_id:res.data.device_id,
							device_sn:res.data.device_sn,
						}
					}
				)
			}
			this.getAppList()
		},

		methods: {
			getAppList(){
				this.storeInfo.getAppList((data)=>{
					let arr=[]
					for(let val of data.values()){
						arr.push({
							text:val.name,
							value:val.id,
						})
					}
					this.dropdown=arr
				})
			},
			chooseApp(e){
				this.form.app_id=e.value
				this.form.app_name=e.text
			},
			submit(){
				console.log('保存', this.form)
				uni.publicJs.post('/app/index?cmd=saveDevice',{form:this.form},
					res=>{
						console.log(res)
						uni.setStorageSync('refresh-device-list', 1)
						uni.navigateBack()
					}
				)
			}
		}
	}
</script>

<style>
page{background-color: #fff;}
</style>
